import React, { memo } from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input } from 'antd';
import { useNavigate } from 'react-router-dom';
import { login } from '../../../../api/login';

const emaillogin = memo((props) => {
  const navigate = useNavigate()
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    Login(values)
  };

  const Login = (values) => login(values).then(res => {
    console.log(res)
  }).catch((err) => {
    console.log(err)
  })

  const getCoder = () => {

  }
  const onCode = () => {
    navigate('/login/code')
  }
  const onPhone = () => {
    navigate('/login/phone')
  }
  return (
    <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        remember: true,
      }}
      size='large'
      onFinish={onFinish}
    >
      <Form.Item
        name="account"
        rules={[
          {
            required: true,
            message: '请输入邮箱！',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入邮箱" />
      </Form.Item>
      <Form.Item
        name="certificate"
        rules={[
          {
            required: true,
            message: '请输入验证码!',
          },
        ]}
      >
        <div style={{ display: 'flex', gap: '5px' }}>
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="请输入验证码"
          />
          <Button onClick={() => getCoder()} type='primary'>获取验证码</Button>
        </div>
      </Form.Item>
      <div style={{ display: 'flex', gap: '10px', marginBottom: '10px' }}>
        <span onClick={() => onCode()} style={{ cursor: 'pointer', color: '#1677ff' }}>验证码登录</span>
        <span onClick={() => onPhone()} style={{ cursor: 'pointer', color: '#1677ff' }}>密码登录</span>
      </div>
      <Form.Item>
        <Button block type="primary" htmlType="submit" className="login-form-button">
          登 录
        </Button>
      </Form.Item>
    </Form>
  );
})

export default emaillogin

